<template>
  <div>
     <homeHeader :city="city"></homeHeader>
    <swiper :list="swiperList"></swiper>
    <homeIcons :list="iconList"></homeIcons>
    <homeRecommend :list="recommendList"></homeRecommend>
    <homeWeekend :list="weekendList"></homeWeekend>
  </div>

</template>
<script>
  import homeHeader from './components/header'
  import swiper from './components/swiper'
  import homeIcons from './components/icons'
  import homeRecommend from './components/recommend'
  import homeWeekend from './components/weekend'
  import axios from 'axios'
  export default {
  name: 'home',
    data(){
    return {
      city: '',
      swiperList:[],
      iconList:[],
      recommendList: [],
      weekendList:[]
    }
    },
  components:{
    homeHeader,
    swiper,
    homeIcons,
    homeRecommend,
    homeWeekend
  },
    methods:{
    getHomeInfo(){
      axios.get('/api/index.json').then(this.getHomeInfoSucc)
    },
      getHomeInfoSucc(res){
         res=res.data
        if(res.ret && res.data){
           const data = res.data
          this.city = data.city
          this.swiperList=data.swiperList
          this.iconList = data.iconList
          this.recommendList=data.recommendList
          this.weekendList=data.weekendList
        }
      }
    },
    mounted(){
      this.getHomeInfo()
    }
}
</script>
<style scoped>
</style>
